// 柱状图组件

// 1.把功能代码全部都放这个组件中
// 2.把可变参数的部分抽象为Prop参数

import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'



function BarChart({title}) {
    const chartRef = useRef(null)
    useEffect(() => {
        // 保证DOM可用

        // 1.获取渲染节点元素
        const chartDom = chartRef.current
        // 2.初始化图表实例对象
        const myChart = echarts.init(chartDom)
        // 3.准备图表参数
        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['react', 'vue', 'angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [10, 40, 70],
                    type: 'bar'
                }
            ]
        }
        // 4.使用图表参数，完成图表渲染
        option && myChart.setOption(option)
    }, [title])
    return (
        <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
    )
}

export default BarChart